<template>
  <div class="com-container">
    <div class="com-chart" ref="seller_ref"></div>
  </div>
</template>

<script>

import {mapState} from 'vuex' 
export default {
  name: "",

  data() {
    return {
      echartsInit: null,
      allData: null,
      currentPage: 1,
      totalPage: 0,
      time01: null,
      echarts: null
    };
  },

  mounted() {
    this.init();
    this.getDatae();
    window.addEventListener("resize", this.screenAdapter);
    this.screenAdapter();
  },

  destroyed() {
    clearInterval(this.time01);
    window.removeEventListener("resize", this.screenAdapter);
  },

  methods: {
    init() {
      this.echarts = require("echarts");
      this.echartsInit = this.echarts.init(this.$refs.seller_ref, this.theme);
      const InitOption = {
        title: {
          text: "|商家销售统计表",
          textStyle: {
            fontWeight: "bold"
            // fontSize: 33,
          },
          left: 20,
          top: 20,        },
        grid: {               //图标距离浏览器边缘的位置,对坐标轴的设置
          top: "20%",
          left: "3%",
          right: "6%",
          bottom: "3%",
          containLabel: true // 距离是包含坐标轴上的文字
        },
        xAxis: {
          type: "value"
        },
        yAxis: {
          type: "category"
          // data: sellrName
        },
        //提示工具
        tooltip: {
          trigger: "axis",
          showContent: true,
          backgroundColor: "#2D3443",
          axisPointer: {
            z: 0
            // lineStyle: {
            //   width: 66
            // }
          }
        },
        series: [
          {
            type: "bar",
            // data: sellrValue,
            // barWidth: 66,
            label: {
              show: true,
              position: "right"
            },
            itemStyle: {
              //对里面柱子进行样式修改
              // barBorderRadius: [0, 33, 33, 0],
              color: new this.echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "#5052EE"
                },
                {
                  offset: 1,
                  color: "#AB6EE5"
                }
              ])
            }
          }
        ]
      };
      this.echartsInit.setOption(InitOption);
      this.echartsInit.on("mouseover", () => {
        clearInterval(this.time01);
      });
      this.echartsInit.on("mouseout", () => {
        this.setIterval();
      });
    },

    getDatae() {
      // http://127.0.0.1:8888/api/seller
      this.axios.get("http://127.0.0.1:8888/api/seller").then(response => {
        this.allData = response.data;
        //console.log(this.allData)
        // 对数据排序
        this.allData.sort((a, b) => {
          return a.value - b.value;
        });
        this.totalPage =
          this.allData.length % 5 === 0
            ? this.allData.length / 5
            : this.allData.length / 5 + 1;
        this.upDatae();
        this.setIterval();
      });
    },

    upDatae() {
      var star = (this.currentPage - 1) * 5;
      var end = this.currentPage * 5;
      var newData = this.allData.slice(star, end);

      const sellrName = newData.map(item => {
        return item.name;
      });
      const sellrValue = newData.map(item => {
        return item.value;
      });

      const option = {
        // title: {
        //   text: "|商家销售统计表",
        //   textStyle: {
        //     fontWeight: "bold",
        //     fontSize: 33,
        //     left: 20,
        //     top: 20
        //   }
        // },
        // grid: {
        //   top: "20%",
        //   left: "3%",
        //   right: "6%",
        //   bottom: "3%",
        //   containLabel: true // 距离是包含坐标轴上的文字
        // },
        // xAxis: {
        //   type: "value"
        // },
        yAxis: {
          // type: "category",
          data: sellrName
        },
        //提示工具
        // tooltip: {
        //   trigger: "axis",
        //   showContent: true,
        //   backgroundColor: "#2D3443",
        //   axisPointer: {
        //     z: 0,
        //     lineStyle: {
        //       width: 66
        //     }
        //   }
        // },
        series: [
          {
            // type: "bar",
            data: sellrValue
            // barWidth: 66,
            // label: {
            //   show: true,
            //   position: "right"
            // },
            // itemStyle: {
            //   //对里面柱子进行样式修改
            //   barBorderRadius: [0, 33, 33, 0],
            //   color: new this.echarts.graphic.LinearGradient(0, 0, 1, 0, [
            //     {
            //       offset: 0,
            //       color: "#5052EE"
            //     },
            //     {
            //       offset: 1,
            //       color: "#AB6EE5"
            //     }
            //   ])
            // }
          }
        ]
      };
      this.echartsInit.setOption(option);
    },

    setIterval() {
      if (this.time01) {
        clearInterval(this.time01);
      }
      this.time01 = setInterval(() => {
        this.currentPage++;
        if (this.currentPage > this.totalPage) {
          this.currentPage = 1;
        }
        this.upDatae();
      }, 2000);
    },

    screenAdapter() {
      const titleSize = (this.$refs.seller_ref.offsetWidth / 100) * 3.6;
      const adapteroption = {
        title: {
          // text: "|商家销售统计表",
          textStyle: {
            // fontWeight: "bold",
            fontSize: titleSize
            // left: 20,
            // top: 20
          }
        },
        // grid: {
        //   top: "20%",
        //   left: "3%",
        //   right: "6%",
        //   bottom: "3%",
        //   containLabel: true // 距离是包含坐标轴上的文字
        // },
        // xAxis: {
        //   type: "value"
        // },
        // yAxis: {
        //   type: "category",
        //   // data: sellrName
        // },
        //提示工具
        tooltip: {
          // trigger: "axis",
          // showContent: true,
          // backgroundColor: "#2D3443",
          axisPointer: {
            // z: 0,
            lineStyle: {
              width: titleSize
            }
          }
        },
        series: [
          {
            // type: "bar",
            // data: sellrValue,
            barWidth: titleSize,   //柱条的宽度
            // label: {
            //   show: true,
            //   position: "right"
            // },
            itemStyle: {
              //对里面柱子进行样式修改
              barBorderRadius: [0, titleSize / 2, titleSize / 2, 0]  //柱条的描边宽度，默认不描边。
              // color: new this.echarts.graphic.LinearGradient(0, 0, 1, 0, [
              //   {
              //     offset: 0,
              //     color: "#5052EE"
              //   },
              //   {
              //     offset: 1,
              //     color: "#AB6EE5"
              //   }
              // ])
            }
          }
        ]
      };

      this.echartsInit.setOption(adapteroption);
      this.echartsInit.resize();
    }
  },
  computed:{
    ...mapState(['theme'])    //把vuex里的theme属性映射给seller组件，在seller组件里就可以直接使用this.theme
  },
  watch:{
    theme(){          //监听theme，只要theme发生变化，就会调用下面的方法
      console.log('主题切换了')
      this.echartsInit.dispose()  // 销毁当前的图表
      this.init()
      this.screenAdapter()
      this.upDatae()
    }
  },
};
</script>
